<template>
    <div id="app">
        <!--<mt-navbar v-model="selected">
            <mt-tab-item id="1">选项一</mt-tab-item>
            <mt-tab-item id="2">选项二</mt-tab-item>
            <mt-tab-item id="3">选项三</mt-tab-item>
        </mt-navbar>
        <ul v-infinite-scroll="loadMore" infinite-scroll-distance="15" infinite-scroll-disabled="loading"
            class="content-list">
            <li v-for="l in list">
                <a href="">
                    <h2>{{ l }}</h2>
                    <div>
                        <img src="" alt="">
                        <div>
                            <p></p>
                            <p></p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>-->
        <mt-tab-container v-model="active" :swipeable="true">
            <mt-tab-container-item id="tab-container-home">
                    <mt-header :title="title"></mt-header>
                    <h2>春天的故事</h2>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container-message">
                <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container-me">
                <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
            </mt-tab-container-item>
        </mt-tab-container>
        <mt-tabbar v-model="selected">
            <mt-tab-item id="home">
                <img slot="icon" src="./assets/logo.png">
                首页
            </mt-tab-item>
            <mt-tab-item id="message">
                <img slot="icon" src="./assets/logo.png">
                消息
            </mt-tab-item>
            <mt-tab-item id="me">
                <img slot="icon" src="./assets/logo.png">
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
//    require('./assets/scss/reset.scss');

    export default {
        name: 'app',
        data () {
            return {
                title: 'CNode社区',
                loading: false,
                active: 'tab-container-home',
                selected: 'home',
                list: [1, 2]
            };
        },
        methods: {
            loadMore(){
                this.loading = true;
                setTimeout(() => {
                    let last = this.list[this.list.length - 1];
                    for (let i = 1; i <= 10; i++) {
                        this.list.push(last + i);
                    }
                    this.loading = false;
                }, 2500);
            }
        },
        watch: {
            selected(newVal, oldVal) {
                this.active = 'tab-container-' + newVal;
            }
        }
    };
</script>

<style scoped>
    .content-list > li {
        border-bottom: solid 1px #d5dbdb;
    }
</style>
